<template>
  <div>
    <el-dialog
      title="数据连接"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="50%"
      append-to-body
    >
      <template #default>
        <!-- 连接类型选择 -->
        <div>连接类型</div>
        <el-select v-model="formModel.config.type" placeholder="请选择">
          <el-option
            v-for="type in joinTypes"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </el-select>

        <!-- 配置连接条件 -->
        <div>连接条件</div>
        <el-button type="primary" @click="handleAdd">添加连接条件</el-button>
        <el-table
          :data="formModel.config.columnList"
          style="width: 100%"
          height="250"
          :row-style="{ height: '10px' }"
          :cell-style="{ padding: '5px 0' }"
        >
          <el-table-column label="左表列名" width="160">
            <template #default="scope">
              <el-select v-model="scope.row.left">
                <el-option
                  v-for="item in leftInputRemainColumn"
                  :key="item.columnName"
                  :label="item.columnName"
                  :value="item.columnName"
                />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="右表列名" width="160" prop="right">
            <template #default="scope">
              <el-select v-model="scope.row.right">
                <el-option
                  v-for="item in rightInputRemainColumn"
                  :key="item.columnName"
                  :label="item.columnName"
                  :value="item.columnName"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template #default="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleUpdate">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import DualCsvInputNode from '../publicComponents/DualCsvInputNode.js'
import DialogHandler from '../publicComponents/DialogHandler.js'

export default {
  name: 'DataJoin',
  inject: ['root','flowchartId'],
  mixins: [DualCsvInputNode, DialogHandler],
  data() {
    return {
      joinTypes: [
        { value: 'inner', label: 'inner' },
        { value: 'outer', label: 'outer' },
        { value: 'left', label: 'left' },
        { value: 'right', label: 'right' }
      ]
    }
  },
  computed: {
    leftInputRemainColumn: function() {
      return this.leftInputData.filter(
        item =>
          !this.formModel.config.columnList.some(
            column => column.left === item.columnName
          )
      )
    },
    rightInputRemainColumn: function() {
      return this.rightInputData.filter(
        item =>
          !this.formModel.config.columnList.some(
            column => column.right === item.columnName
          )
      )
    }
  },
  methods: {
    handleAdd() {
      this.formModel.config.columnList.push({ left: null, right: null })
    },
    handleDelete(index, row) {
      console.log(index, row)
      this.formModel.config.columnList.splice(index, 1)
    }
  }
}
</script>

<style></style>
